<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { createLeave } from '@/api'

const types = [
  { value: 'personal', label: '事假' },
  { value: 'sick', label: '病假' },
  { value: 'other', label: '其他' },
]

const form = ref({
  type: 'personal',
  start: '',
  end: '',
  reason: '',
  attachment: null,
})

const submitting = ref(false)
const errorMsg = ref('')

const hours = computed(() => {
  if (!form.value.start || !form.value.end) return '-'
  const s = new Date(form.value.start).getTime()
  const e = new Date(form.value.end).getTime()
  if (Number.isNaN(s) || Number.isNaN(e) || e <= s) return '-'
  return Math.round((e - s) / 36e5)
})

const router = useRouter()
const submit = async () => {
  if (!form.value.start || !form.value.end || !form.value.reason) {
    errorMsg.value = '请填写完整信息'
    return
  }

  if (hours.value === '-' || hours.value <= 0) {
    errorMsg.value = '结束时间必须晚于开始时间'
    return
  }

  submitting.value = true
  errorMsg.value = ''

  try {
    const response = await createLeave({
      type: form.value.type,
      startAt: form.value.start,
      endAt: form.value.end,
      reason: form.value.reason,
    })

    if (response.code === 0) {
      // 提交成功，显示提示并返回列表页
      alert('✅ 请假申请提交成功！')
      router.replace('/student/leave/list')
    } else {
      errorMsg.value = response.message || '提交失败'
      alert('❌ ' + errorMsg.value)
    }
  } catch (error) {
    console.error('提交请假申请失败:', error)
    errorMsg.value = error.message || '提交失败，请重试'
    alert('❌ ' + errorMsg.value)
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <div class="form-card">
    <div class="row">
      <label>请假类型</label>
      <select v-model="form.type">
        <option v-for="t in types" :key="t.value" :value="t.value">{{ t.label }}</option>
      </select>
    </div>
    <div class="row grid">
      <div class="col">
        <label>开始时间</label>
        <input v-model="form.start" type="datetime-local" />
      </div>
      <div class="col">
        <label>结束时间</label>
        <input v-model="form.end" type="datetime-local" />
      </div>
      <div class="col hours">
        <label>时长(小时)</label>
        <div class="hours-box">{{ hours }}</div>
      </div>
    </div>
    <div class="row">
      <label>请假事由</label>
      <textarea v-model="form.reason" rows="4" placeholder="简要说明请假原因" />
    </div>
    <div class="row">
      <label>附件（可选）</label>
      <input type="file" />
    </div>
    <div class="actions">
      <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
      <button class="btn primary" :disabled="submitting" @click="submit">
        {{ submitting ? '提交中...' : '提交申请' }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.form-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
label {
  font-size: 14px;
  color: #1d1d1f;
  font-weight: 600;
}
select,
input,
textarea {
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f5f5f7;
  outline: none;
  transition: 0.2s;
}
select:focus,
input:focus,
textarea:focus {
  background: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(255, 105, 0, 0.1);
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 12px;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hours .hours-box {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  color: var(--color-primary);
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
.btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
}
.btn.primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 105, 0, 0.3);
}
.btn.primary:hover {
  background: var(--color-primary-hover);
}
.btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn.ghost {
  background: #fff;
  border-color: #e5e7eb;
}
.error-msg {
  color: var(--color-danger);
  font-size: 14px;
  padding: 10px;
  background: rgba(255, 59, 48, 0.1);
  border-radius: 8px;
  text-align: center;
  margin-bottom: 12px;
}
</style>
